﻿<!DOCTYPE html>     
   
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>消息气泡的使用</title>     
<meta name="viewport" content="width=device-width, initial-scale=0.5">     
<link rel="stylesheet" href="jquery.mobile.min.css" />     
<script src="jquery-2.1.4.min.js"></script>     
<script src="jquery.mobile.min.js"></script>     
</head>               
<body>
	<!--设置了新的页面-->
	<div data-role="page">
    		<div data-role="header" data-position="fixed" data-fullscreen="true">
        	   <a href="#">返回</a>    
            <h1>商品列表</h1>    
            <a href="#">设置</a>
        </div>
		<!---不使用内容栏直接在页面中加入列表-->
		<ul data-role="listview" data-inset="true">
			<li><a href="#">						<!--每一个li标签标示列表中额一项-->
				<h2>联想Y400</h2>				<!--用来显示电脑的型号-->
				<p>价格：5199</p>					<!--这个是价格-->
				<span class="ui-li-count">820</span>	<!--本节的重点，以气泡的形式给出信息-->
			</a></li>								<!--结束-->
			<li><a href="#">
				<h2>ThinkPad E430</h2>
				<p>价格：3749</p>
				<span class="ui-li-count">45</span>
			</a></li>
			<li><a href="#">
				<h2>神舟K590</h2>
				<p>价格：4599</p>
				<span class="ui-li-count">123</span>
			</a></li>
			<li><a href="#">
				<h2>清华同方U410</h2>
				<p>价格：4099</p>
				<span class="ui-li-count">444</span>
			</a></li>
			<li><a href="#">
				<h2>戴尔14V inspiron</h2>
				<p>价格：3099</p>
				<span class="ui-li-count">674</span>
			</a></li>
			<li><a href="#">
				<h2>iMac</h2>
				<p>价格：15999</p>
				<span class="ui-li-count">99</span>
			</a></li>
		</ul>
    </div>
</body>
</html>